<template>
    <div>
        <el-container>
            <el-header style="height:40px ;color: white;line-height: 40px;">
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content" style="font-size: 15px;">欢迎来到西瓜宠物医院官网</div>
                    </el-col>
                    <el-col :span="8" :offset="8">
                        <div class="grid-content" v-if="customer.username != null">
                            <ul style="display: flex;font-size: 13px;">
                                <li sty>(●'◡'●)欢迎您,{{ customer.username }}</li>
                                <li><a href="/front/my/person" style="color: white;">个人中心</a></li>
                                <li><a href="" @click="logout">注销</a></li>
                            </ul>
                        </div>
                        <div class="grid-content" style="font-size: 13px;" v-else>
                            <span><a href="/front/login">登录</a></span>
                            <span style="margin-left:10px;"><a href="/front/register">注册</a></span>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-header style="background-color: white;">
                <el-row>
                    <el-col :span="10" :offset="7" style="text-align: center;">
                        <el-menu :default-active="activeIndex" style="background-color: white;" class="el-menu-demo"
                            mode="horizontal" @select="handleSelect" router>
                            <el-menu-item index="/front/home">首页</el-menu-item>
                            <el-menu-item index="/front/information">宠物资讯</el-menu-item>
                            <el-submenu index="2">
                                <template slot="title">客户服务</template>
                                <el-submenu index="2-1">
                                    <template slot="title">个人服务</template>
                                    <el-menu-item index="/front/my/person">个人信息</el-menu-item>
                                    <el-menu-item index="/front/my/mypet">我的宠物</el-menu-item>
                                </el-submenu>
                                <el-submenu index="2-2">
                                    <template slot="title">看病服务</template>
                                    <el-menu-item index="/front/my/reserve">预约问诊</el-menu-item>
                                    <el-menu-item index="/front/my/mytreatment">问诊记录</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                            <el-submenu index="3">
                                <template slot="title">购物服务</template>
                                <el-menu-item index="/front/drug/1">感冒药</el-menu-item>
                                <el-menu-item index="/front/drug/2">抗生素</el-menu-item>
                                <el-menu-item index="/front/drug/3">维生素</el-menu-item>
                                <el-menu-item index="/front/drug/4">消化药</el-menu-item>
                                <el-menu-item index="/front/drug/5">心脏药</el-menu-item>
                                <el-menu-item index="/front/drug/6">止痛药</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="/front/my/order">我的订单</el-menu-item>
                            <el-menu-item index="/front/message">在线留言</el-menu-item>
                        </el-menu></el-col>
                    <el-col :span="7">
                        <div style="text-align: center;line-height: 61px;">
                            <span><el-button style="opacity: 0.6;" type="success" @click="jumpShopCart">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-mianxinggouwuche"></use>
                                    </svg>购物车
                                </el-button></span>
                            <!-- <span>商城</span> -->
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-header style="height: 40px;line-height: 25px;" :class="isFront ? 'hid' : ''">
                <MyBreadcrumb></MyBreadcrumb>
            </el-header>
        </el-container>
        <div style="background-image: url(../../assets/login.jpg);">
            <transition name="fade-right" mode="out-in">
                <router-view></router-view>
            </transition>
        </div>

        <el-container>
            <el-footer style="font-size: 15px;padding: 20px 0px;height: auto; ">
                <div>Copyright © 2023-2024,www.xguacwyy.com,All rights reserved</div>
                <div>版权所有 © 西瓜宠物医院 未经许可 严禁复制 建议使用1024X768分辨率浏览本站</div>
                <div>备案号：蜀ICP备888888号-1</div>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
import MyBreadcrumb from "@/components/MyBreadcrumb.vue"
export default {
    name: "Front",
    components: { MyBreadcrumb },
    data() {
        return {
            customer: localStorage.getItem("customer") ? JSON.parse(localStorage.getItem("customer")) : {},
            activeIndex: '1'
        }
    },
    computed: {
        isFront() {
            return this.$route.fullPath == "/front/home" ? 1 : 0
        }
    },
    mounted() {
        this.$bus.$on("getCustomerImageAndName", this.clog)
    },
    methods: {
        logout() {
            //注销按钮函数
            localStorage.clear("customer");
            this.$router.push("/front")
        },
        handleSelect(key, keyPath) {
            //首页菜单选中打印
            console.log(key, keyPath);
        },
        jumpShopCart() {
            //跳转购物车界面按钮函数
            this.$router.push("/front/shopcart")
        }
    }
}
</script>

<style lang="less" scoped>
// 进入后和离开前保持原位
.fade-right-enter-to,
.fade-right-leave-from {
    opacity: 1;
    transform: none;
}

// 设置进入和离开过程中的动画时长0.5s
.fade-right-enter-active,
.fade-right-leave-active {
    transition: all 0.6s;
}

// 进入前和离开后为透明，并在右侧20px位置
.fade-right-enter-from,
.fade-right-leave-to {
    opacity: 0;
    transform: translateX(50%);
}

.icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.hid {
    display: none;
}

.el-col>div>ul>li {
    list-style: none;
    margin: 0 10px;
}

a {
    text-decoration: none;
    color: white;
}

.el-header,
.el-footer {
    background-color: #2F2F2F;
    color: #333;
    text-align: center;
    color: aliceblue;
    font-size: 12px;
    line-height: 20px;
}

.el-header:last-child {
    margin: 10px 0px;
    padding: 0px 200px;
    height: 40px;
    background-color: rgb(245, 245, 245);

}

.el-main {

    .leftbox {
        padding-left: 130px;

        p:first-child {
            font-size: 25px;
        }

        p:last-child {
            font-size: 15px;
            color: darkgray;
        }
    }

    .rightbox {
        img {
            width: 500px;
            height: 250px;
        }
    }

    .leftbox,
    .rightbox {
        float: left;
        width: 50%;
        height: 300px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    color: #333;
    text-align: center;

    padding: 0;
}

body>.el-container {
    margin-bottom: 40px;
}
</style>